<!DOCTYPE html>
<html>
<head>
	<title>页面一</title>
    <include file='public/head'>
        <style>
			.layui-legend-size{font-size:14px !important;}
			.layui-nopadding{padding:0 !important;}
			.layui-overflow{overflow:auto;}
			.layui-nomargin{margin: 0 !important;}
			.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
			.layui-input{height:30px !important; }
			.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
			.layui-form-search-item label{margin-left: 15px;}
			.layui-table-page {padding: 7px 0px 0px;}
			.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
        </style>
</head>
<body>
	<!-- layui-tab开始 -->
	<div class="layui-tab" lay-filter="demo-tab" >
		<!-- 顶部导航菜单开始 -->
		<div class="layui-tab-nav">
			<ul class="layui-tab-title">
				<php> $currentTab = 1 ; </php>
				<include file="public/nav"></include>
			</ul>
		</div>	
		<!-- 顶部导航菜单结束 -->

		<!-- 搜索栏开始 -->
		<fieldset class="layui-elem-field layui-field-title layui-field-padding">
			<legend class="layui-legend-size">搜索</legend>
			<form class="layui-form table-bar" action="{:cmf_plugin_url('Demo://admin_index/indexs')}" lay-filter="form-bar">

				<div class="layui-form-search-item">
					<div class="layui-inline">
						<div class="layui-input-inline " style="width: 100px;" >
							<select name="city" lay-verify=""  >
								<option value="1">用户</option>
								<option value="2">id</option>
							</select>
						</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="name" autocomplete="off" placeholder="请输入内容" class="layui-input">
						</div>
					</div>
					
					<label>状态</label>
					<div class="layui-inline" >
						<div class="layui-input-inline" style="width: 100px;">
							<select name="city" lay-verify="">
								<option value="">请选择</option>
								<option value="1">启用</option>
								<option value="2">禁用</option>
							</select>   
						</div>
					</div>

					<label>时间</label>
					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" name="search[start_time]" class="layui-input" id="test1" style="width: 100px;">
						</div>
						至
						<div class="layui-input-inline">
							<input type="text"  name="search[end_time]" class="layui-input" id="test2" style="width: 100px;">
						</div>
					</div>
				
					<label>条件筛选</label>
					<div class="layui-inline">
						<div class="layui-input-inline" >
							<select name="modules" lay-search="" >
								<option value="">直接选择或搜索选择</option>
								<option value="1">layer</option>
								<option value="2">form</option>
							</select>
						</div>
					</div>

					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-sm layui-btn-primary " style="font-weight:800;" lay-submit="" lay-filter="demo2"><i class="layui-icon ">&#xe615;</i>搜索</button>
					</div>
				</div>
			</form>
		</fieldset>
		<!-- 搜索栏结束 -->

		<!-- 内容开始 -->
		<form  class="layui-form" action="">

			<!-- 数据表格开始 -->
			<table class="layui-hide" id="article_tab" lay-filter="article_tab"></table>
			<!-- 数据表格结束 -->

			<!-- 表头部工具开始 -->
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batch_delete">批量删除</button>
					<button type="button" class="layui-btn layui-btn-xs" lay-event="batch_add">添加</button>
				</div>
			</script>
			<!-- 表头部工具结束 -->

			<!--这个是选择框tpl-->
			<script type="text/html" id="show_tpl">
				<input type="checkbox" name="status" value="{d.id}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="show_switch" {eq name="d.switch" value="1"}value{/eq} >
			</script>

			<!-- toolbar - 工具条模板开始 -->
			<script type="text/html" id="action_bar">
				<div class="layui-btn-group">
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs " lay-event="update">
						<i class="layui-icon">&#xe642;</i>
					</button>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs "  lay-event="delete">
						<i class="layui-icon">&#xe640;</i>
					</button>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs "  lay-event="detail">
						<i class="layui-icon">&#xe602;</i>
					</button>
				</div>
			</script>
			<!-- toolbar - 工具条模板结束 -->
		</form>
		<!-- 内容结束 -->
	</div>
	<!-- layui-tab结束-->

	<include file='public/scripts'>

	<!-- script开始-->	
	<script>
	;!function(){
		var form = layui.form
			,layer = layui.layer    //弹出层必需
			,layedit = layui.layedit  //富文本必需
			,laydate = layui.laydate  //日期选择必需
			,table = layui.table  //表格必需
			,element = layui.element;  //选项卡	
	}();

		table = layui.table;
	
        //渲染表格
        table.render({
                elem: '#article_tab'
                ,cellMinWidth: 40 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,limit:3
                ,url:"{:cmf_plugin_url('Demo://admin_index/arc_list')}"//数据接口
				,toolbar: '#toolbarDemo' //开启表格头部工具栏区域
				,cols: [[
					{type:'checkbox'}
					,{field:'id',  title: 'ID'}
					,{field:'title', title: '标题'}
					,{field:'name',title:'模块名'}
					,{field:'describe', title:'简介'}
					,{field:'code',title:'是否发布',templet: '#show_tpl', unresize: true}
					,{field:'cate_url', title:'操作', width: 115,toolbar:'#action_bar'}
                ]]//设置表头
                ,page:true//开启分页
				,parseData: function(res){ //res 即为原始返回的数据
					return {
					"code": res.code, //解析接口状态
					"msg": res.msg, //解析提示文本
					"count": res.count, //解析数据长度
					"data": res.data //解析数据列表
					};}
         
 
            });

	//头工具栏
		table.on('toolbar(article_tab)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'batch_add':
					let url = "{:cmf_plugin_url('Demo://admin_index/addPage')}";
					layer.open({
					type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					,title: '添加'//层的标题
					,shadeClose: true//是否点击遮罩关闭
					,shade: 0.8//遮罩
					,area: ['800px', '600px']//宽高
					,btn:['提交','关闭']//弹框按钮
					,fixed:false//固定
					,content: url //iframe的url
					,yes:function(index, layero){
						//调用子页面方法
						parentInfo = window["layui-layer-iframe" + index].callbackdata(index);
					}
					,btn2:function(index, layero){
					}
					});
				break;
				case 'batch_delete':

					var data = checkStatus.data;
					console.log(data);
					let id = $(this).data('id');
					//询问框
					layer.confirm('确定要删除选中项吗？', {icon: 3, title:'提示',btn:['删除','取消']}
					, function(index,layero){
						$.ajax({
							url:"{:cmf_plugin_url('Demo://admin_index/delete')}",
							type:'post',
							data:{id:data},
							success:function(data){
								let icon = ( data.code == 200 )  ? 1 : 5 ; 
									layer.msg( data.message , { time:1200 , icon:icon },function(){
										window.location.reload();
									});
							},
							error:function(data){
								console.log(data);
								layer.msg('批量操作失败',{ time:1200 , icon:5 });
								return false;
							}
							})
							
					},function(index){

					});

				break;
			};
			});

		//表格工具栏
		table.on('tool(article_tab)', function(obj){
			var data = obj.data;
			let url = "{:cmf_plugin_url('Demo://admin_index/editPage')}?id="+data.id;
			console.log(data);
			if(obj.event === 'detail'){
				//当事件为查看详情的时候,open一个页面,内容为data.content
				layer.open({
					type: 2
					,title: "查看" //不显示标题栏
					,titleAlign:'c'
					,closeBtn: false
					,area: ['800px', '600px']
					,shade: 0.8
					,id: 'LAY_article' //设定一个id，防止重复弹出
					,btn: ['确定']
					,btnAlign: 'c'
					,content:url
					,moveType: 1
				});
			} else if(obj.event === 'update'){
				layer.open({
					type: 2
					,title: '编辑'
					,shadeClose: true
					,shade: 0.8
					,area: ['800px', '600px']
					,btn:['保存','关闭']
					,fixed:false
					,content: url //iframe的url
					,yes:function(index, layero){
						//调用子页面方法
						parentInfo = window["layui-layer-iframe" + index].callbackdata();

					},
					btn2:function(index, layero){
					}
				});
			} else if(obj.event === 'delete'){
				let id = $(this).data('id');
				//询问框
				layer.confirm('确定要删除吗？', {icon: 3, title:'提示',btn:['删除','取消']}
				, function(index,layero){
					$.ajax({
						url:"{:cmf_plugin_url('Demo://admin_index/delete')}",
						type:'post',
						data:{id:id},
						success:function(data){
							let icon = ( data.code == 200 )  ? 1 : 5 ; 
								layer.msg( data.message , { time:1200 , icon:icon },function(){
									window.location.reload();
								});
						},
						error:function(data){
							console.log(data);
							layer.msg('失败',{ time:1200 , icon:5 });
							return false;
						}
						})
						
				},function(index){

				});
				
			}
		});

	</script>
	<!-- script结束-->

</body>
</html>